<template>
    <div class="rednest">
      <el-row :gutter="1">
        <el-col :span="18"><div class="grid-content bg-purple">
          <div class="newsTitleDiv" >
            <h2>{{title}}</h2>
            <p>{{date}}</p>
          </div>
          <ul class="newsContentUl">
            <li v-for="(newsItem,index) in newsContent" :key="index">
              <span>{{newsItem.no}}、{{newsItem.content}}</span>
              <span>创话题</span>
            </li>
          </ul>
          <div style="clear:both;"></div>
        </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">
          <div class="newsSidebar">
            <p>三分钟资讯</p>
            <ul class="newsSidebarUl">
              <li v-for="newsItem in newsSidebar" :key="newsItem.url">
                <span>{{newsItem.url}}</span>
              </li>
            </ul>
          </div>
          <div style="clear:both;"></div>
        </div></el-col>
      </el-row>

    </div>
</template>

<script>
    export default {
      name: "news",
      clientHeight:'',
      data(){
        return{

          //新闻标题
          title:'每天三分钟 新闻资讯' ,
          //新闻日期
          date:'2019年2月28日 星期四 好好学习 天天向上',
          //新闻内容
          newsContent:[],
          //右侧信息
          newsSidebar:[
            {url:'2019年02月28日'},
            {url:'2019年03月01日'},
            {url:'2019年03月02日'},
          ]
        }
      },
      methods:{
        getNewsContent(){
          this.list = [];
          for(let i = 1 ;i <11 ;i ++){
            let list = [ {
              no:i,
              content:'内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容'+i,
            },];
              this.newsContent=this.newsContent.concat(list)
          }
        }
      },
      created () {
        this.getNewsContent();
      },
    }
</script>

<style scoped>
  .newsTitleDiv h2{
  display: inline-block;
  float: left;
  margin: 5% 0px 5% 3%;
  }
  .newsTitleDiv p{
  display: inline-block;
  float: right;
  margin:5% 2% 5% 0px;
  }
  .newsContentUl li span{
    margin:1% 3%;
    font-size: 20px;

    word-wrap:break-word;
  }
  .newsContentUl li span:nth-of-type(1){
    float: left;
    clear: left;
    width: 75%;
    text-align: left;
  }
  .newsContentUl li span:nth-of-type(2){
    float: right;
    clear: right;
    color: red;
  }
</style>
